<template>
  <view class="detail-container">
    <!-- 顶部图片轮播 -->
    <view class="header-section">
      <swiper class="image-swiper" indicator-dots="true" autoplay="false">
        <swiper-item>
          <image
            :src="productDetail.dishImg || productDetail.imgUrl || '/static/default-product.jpg'"
            class="product-image"
            mode="aspectFill"
          />
        </swiper-item>
      </swiper>
      
      <!-- 状态标签 -->
      <view :class="['status-overlay', statusClass]">
        <text class="status-text">{{ statusText }}</text>
      </view>
      
      <!-- 返回按钮 -->
      <view class="back-btn" @click="goBack">
        <u-icon name="arrow-left" size="40" color="#fff" />
      </view>
    </view>

    <!-- 滚动内容区 -->
    <scroll-view scroll-y class="content-scroll">
      <!-- 商品基本信息 -->
      <view class="product-info">
        <view class="title-section">
          <text class="product-title">{{ productDetail.dishName || productDetail.planName }}</text>
          <view v-if="discountPercent" class="discount-tag">
            {{ discountPercent }}折
          </view>
        </view>
        
        <!-- 价格信息 -->
        <view class="price-section">
          <view class="current-price">
            <text class="price-symbol">¥</text>
            <text class="price-number">{{ productDetail.seckillPrice }}</text>
            <text class="price-unit">/件</text>
          </view>
          <view class="original-price">
            <text class="original-text">原价：¥{{ productDetail.originalPrice || productDetail.price }}</text>
            <text class="save-text">已省¥{{ savedAmount }}</text>
          </view>
        </view>

        <!-- 活动进度 -->
        <view class="progress-card">
          <view class="progress-header">
            <text class="progress-title">抢购进度</text>
            <text class="progress-percent">{{ progressPercent }}%</text>
          </view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
          </view>
          <view class="progress-info">
            <text class="sold-info">已售{{ soldCount }}件</text>
            <text class="stock-info">剩余{{ remainingStock }}件</text>
          </view>
        </view>

        <!-- 限购说明 -->
        <view class="limit-info">
          <view class="limit-item">
            <u-icon name="clock" size="32" color="#666" />
            <text class="limit-text">限购{{ productDetail.purchaseLimit || productDetail.limitBuy }}件</text>
          </view>
          <view class="limit-item">
            <u-icon name="calendar" size="32" color="#666" />
            <text class="limit-text">活动时间</text>
          </view>
        </view>

        <!-- 时间信息 -->
        <view class="time-card">
          <view class="time-row">
            <text class="time-label">开始时间：</text>
            <text class="time-value">{{ formatTime(productDetail.startTime) }}</text>
          </view>
          <view class="time-row">
            <text class="time-label">结束时间：</text>
            <text class="time-value">{{ formatTime(productDetail.endTime) }}</text>
          </view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="detail-section">
        <view class="section-title">
          <text class="title-text">套餐详情</text>
        </view>
        <view class="detail-content">
          <text class="detail-text">{{ productDetail.details || '暂无详细介绍' }}</text>
        </view>
      </view>

      <!-- 购买记录 -->
      <view class="purchase-records">
        <view class="section-title">
          <text class="title-text">抢购记录</text>
        </view>
        <view class="record-list">
          <view class="record-item" v-for="(record, index) in mockRecords" :key="index">
            <image :src="record.avatar" class="user-avatar" mode="aspectFill" />
            <view class="record-info">
              <text class="user-name">{{ record.name }}</text>
              <text class="purchase-time">{{ record.time }}</text>
            </view>
            <text class="purchase-count">成功抢购{{ record.count }}件</text>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <!-- 倒计时显示 -->
      <view v-if="currentStatus === 'upcoming'" class="countdown-container">
        <text class="countdown-label">距离开始</text>
        <view class="countdown-time">
          <view class="time-block">
            <text class="time-num">{{ timeLeft.hours }}</text>
            <text class="time-unit">时</text>
          </view>
          <text class="time-separator">:</text>
          <view class="time-block">
            <text class="time-num">{{ timeLeft.minutes }}</text>
            <text class="time-unit">分</text>
          </view>
          <text class="time-separator">:</text>
          <view class="time-block">
            <text class="time-num">{{ timeLeft.seconds }}</text>
            <text class="time-unit">秒</text>
          </view>
        </view>
      </view>

      <!-- 购买按钮区 -->
      <view v-else class="action-buttons">
        <view class="stock-info-btn">
          <text class="stock-text">库存{{ stockCount }}</text>
        </view>
        
        <button 
          v-if="currentStatus === 'active'"
          class="buy-button"
          @click="handlePurchase"
        >
          <text class="buy-text">立即抢购</text>
        </button>
        
        <button v-else class="disabled-button" disabled>
          <text class="disabled-text">活动已结束</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { getSeckillDetail, buySeckill, startSystemSeckill, getSeckillRealTimeStock } from '@/api/seckill'
import { getDishById } from '@/api/dish'
import { parseDate, getTimeStatus, getCountdown, formatTime } from '@/utils/dateUtils'

// 从路由获取参数
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const options = currentPage.options || {}
console.log('页面参数:', options)

// 检查缓存数据来确定秒杀类型
const cachedSeckillData = uni.getStorageSync('currentSeckillDetail')
console.log('检查缓存数据:', cachedSeckillData)

const seckillId = options.seckillId || options.releaseId || cachedSeckillData?.releaseId
const isStoreSeckill = options.type === 'store' || !!options.releaseId || !!cachedSeckillData?.releaseId

console.log('seckillId:', seckillId, 'isStoreSeckill:', isStoreSeckill, 'type:', options.type, 'hasCachedData:', !!cachedSeckillData)

// 响应式数据
const productDetail = ref({})
const loading = ref(true)
const stockCount = ref(0)

// 倒计时
const timeLeft = reactive({
  hours: '00',
  minutes: '00',
  seconds: '00'
})

// 模拟购买记录
const mockRecords = ref([
  { name: '用户***123', avatar: '/static/default-avatar.png', time: '2分钟前', count: 1 },
  { name: '用户***456', avatar: '/static/default-avatar.png', time: '5分钟前', count: 2 },
  { name: '用户***789', avatar: '/static/default-avatar.png', time: '8分钟前', count: 1 }
])

let countdownTimer = null

// 计算属性
const currentStatus = computed(() => {
  if (!productDetail.value.startTime || !productDetail.value.endTime) return 'loading'
  
  return getTimeStatus(productDetail.value.startTime, productDetail.value.endTime)
})

const statusText = computed(() => {
  const statusMap = {
    upcoming: '即将开始',
    active: '正在抢购',
    ended: '已结束',
    loading: '加载中'
  }
  return statusMap[currentStatus.value]
})

const statusClass = computed(() => {
  return {
    upcoming: 'status-upcoming',
    active: 'status-active',
    ended: 'status-ended',
    loading: 'status-loading'
  }[currentStatus.value]
})

const soldCount = computed(() => {
  const originalTotal = productDetail.value.originalSeckillQuantity || productDetail.value.seckillQuantity || productDetail.value.limitBuy || 100
  const remaining = remainingStock.value
  return originalTotal - remaining
})

const remainingStock = computed(() => {
  return productDetail.value.seckillQuantity || productDetail.value.stock || 0
})

const progressPercent = computed(() => {
  const originalTotal = productDetail.value.originalSeckillQuantity || productDetail.value.seckillQuantity || productDetail.value.limitBuy || 100
  const sold = soldCount.value
  const percent = Math.floor((sold / originalTotal) * 100)
  
  console.log('详情页进度计算:', {
    originalTotal,
    remaining: remainingStock.value,
    sold,
    percent
  })
  
  return percent
})

const discountPercent = computed(() => {
  const original = productDetail.value.originalPrice || productDetail.value.price || 0
  const seckill = productDetail.value.seckillPrice || 0
  if (original && seckill && original > seckill) {
    return Math.floor((seckill / original) * 10)
  }
  return null
})

const savedAmount = computed(() => {
  const original = productDetail.value.originalPrice || productDetail.value.price || 0
  const seckill = productDetail.value.seckillPrice || 0
  return (original - seckill).toFixed(2)
})

onMounted(() => {
  // 延迟一下再加载，确保页面参数已经获取到
  setTimeout(() => {
    // 重新获取页面参数
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const newOptions = currentPage.options || {}
    console.log('onMounted中重新获取的页面参数:', newOptions)
    
    // 如果有新参数，更新判断逻辑
    if (Object.keys(newOptions).length > 0) {
      Object.assign(options, newOptions)
      console.log('更新后的页面参数:', options)
    }
    
    loadDetail()
  }, 100)
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
  // 清理缓存数据
  uni.removeStorageSync('currentSeckillDetail')
})

// 加载详情数据
function loadDetail() {
  loading.value = true
  
  console.log('开始加载详情数据，判断类型...')
  console.log('isStoreSeckill:', isStoreSeckill)
  console.log('seckillId:', seckillId)
  console.log('cachedSeckillData:', cachedSeckillData)
  
  // 优先检查缓存数据来判断类型
  const hasStoreSeckillCache = cachedSeckillData && cachedSeckillData.releaseId
  const finalIsStoreSeckill = hasStoreSeckillCache || isStoreSeckill
  
  console.log('最终判断结果 - finalIsStoreSeckill:', finalIsStoreSeckill, 'hasStoreSeckillCache:', hasStoreSeckillCache)
  
  // 根据是否有releaseId判断是门店秒杀还是系统秒杀
  if (finalIsStoreSeckill) {
    console.log('识别为门店秒杀，加载门店秒杀详情')
    // 门店秒杀详情
    loadStoreSeckillDetail()
  } else {
    console.log('识别为系统秒杀，加载系统秒杀详情')
    // 系统秒杀详情
    loadSystemSeckillDetail()
  }
}

// 加载门店秒杀详情
function loadStoreSeckillDetail() {
  console.log('加载门店秒杀详情，releaseId:', seckillId)
  console.log('URL参数:', options)
  
  // 使用已经获取的缓存数据
  const cachedData = cachedSeckillData
  console.log('使用缓存的秒杀数据:', cachedData)
  
  let seckillBasicData
  
  if (cachedData && cachedData.releaseId) {
    // 使用缓存数据
    seckillBasicData = {
      releaseId: cachedData.releaseId,
      dishId: parseInt(cachedData.dishId) || 4,
      seckillPrice: parseFloat(cachedData.seckillPrice) || 20,
      seckillQuantity: parseInt(cachedData.seckillQuantity) || 10,
      purchaseLimit: parseInt(cachedData.purchaseLimit) || 1,
      startTime: cachedData.startTime || '2025-06-04 00:00:00',
      endTime: cachedData.endTime || '2025-06-05 00:00:00',
      status: parseInt(cachedData.status) || 2,
      dishName: cachedData.dishName || '',
      dishImg: cachedData.dishImg || '',
      originalPrice: cachedData.originalPrice || '',
      details: cachedData.details || ''
    }
    console.log('使用缓存数据构建秒杀信息')
  } else {
    // 回退到URL参数（兼容旧版本）
    seckillBasicData = {
      releaseId: seckillId,
      dishId: parseInt(options.dishId) || 4,
      seckillPrice: parseFloat(options.seckillPrice) || 20,
      seckillQuantity: parseInt(options.seckillQuantity) || 10,
      purchaseLimit: parseInt(options.purchaseLimit) || 1,
      startTime: options.startTime || '2025-06-04 00:00:00',
      endTime: options.endTime || '2025-06-05 00:00:00',
      status: parseInt(options.status) || 2
    }
    console.log('使用URL参数构建秒杀信息')
  }
  
     console.log('门店秒杀基本数据:', seckillBasicData)
   
   // 如果缓存中已有完整数据，直接使用
   if (cachedData && cachedData.dishName) {
     productDetail.value = {
       ...seckillBasicData,
       dishName: seckillBasicData.dishName || `商品${seckillBasicData.dishId}`,
       originalPrice: seckillBasicData.originalPrice || (seckillBasicData.seckillPrice * 1.5).toFixed(2),
       details: seckillBasicData.details || '暂无详细介绍',
       dishImg: seckillBasicData.dishImg,
       originalSeckillQuantity: cachedData.originalSeckillQuantity || seckillBasicData.seckillQuantity // 保存原始库存数量
     }
     
     stockCount.value = productDetail.value.seckillQuantity
     
     console.log('详情页初始数据:', {
       originalSeckillQuantity: productDetail.value.originalSeckillQuantity,
       currentSeckillQuantity: productDetail.value.seckillQuantity,
       stockCount: stockCount.value
     })
     
     // 立即获取实时库存
     refreshRealTimeStock()
     
     if (currentStatus.value === 'upcoming') {
       startCountdown()
     }
     loading.value = false
     
     console.log('使用缓存数据，无需调用菜品接口')
     return
   }
   
   // 根据dishId获取菜品详细信息
   if (seckillBasicData.dishId) {
     getDishById(seckillBasicData.dishId).then(dishRes => {
       console.log('菜品详情响应:', dishRes)
       if (dishRes && dishRes.dish) {
         const dish = dishRes.dish
         
         // 合并秒杀信息和菜品信息
         productDetail.value = {
           ...seckillBasicData,
           dishName: dish?.dishName || `商品${seckillBasicData.dishId}`,
           originalPrice: dish?.price || (seckillBasicData.seckillPrice * 1.5).toFixed(2),
           details: dish?.details || '暂无详细介绍',
           dishImg: dish?.dishImg,
           categoryName: dish?.categoryName,
           originalSeckillQuantity: seckillBasicData.seckillQuantity // 保存原始库存数量
         }
       } else {
         // 如果获取菜品信息失败，使用基本信息
         productDetail.value = {
           ...seckillBasicData,
           dishName: `商品${seckillBasicData.dishId}`,
           originalPrice: (seckillBasicData.seckillPrice * 1.5).toFixed(2),
           details: '暂无详细介绍',
           originalSeckillQuantity: seckillBasicData.seckillQuantity // 保存原始库存数量
         }
       }
       
       stockCount.value = productDetail.value.seckillQuantity
       
       if (currentStatus.value === 'upcoming') {
         startCountdown()
       }
       loading.value = false
     }).catch(error => {
       console.error('获取菜品详情失败:', error)
       // 如果获取菜品信息失败，使用基本信息
       productDetail.value = {
         ...seckillBasicData,
         dishName: `商品${seckillBasicData.dishId}`,
         originalPrice: (seckillBasicData.seckillPrice * 1.5).toFixed(2),
         details: '暂无详细介绍',
         originalSeckillQuantity: seckillBasicData.seckillQuantity // 保存原始库存数量
       }
       
       stockCount.value = productDetail.value.seckillQuantity
       
       if (currentStatus.value === 'upcoming') {
         startCountdown()
       }
       loading.value = false
     })
   } else {
     // 如果没有dishId，直接使用秒杀基本信息
     productDetail.value = {
       ...seckillBasicData,
       originalSeckillQuantity: seckillBasicData.seckillQuantity // 保存原始库存数量
     }
     stockCount.value = productDetail.value.seckillQuantity
     loading.value = false
   }
 }

// 加载系统秒杀详情  
function loadSystemSeckillDetail() {
  console.log('系统秒杀暂不支持详情页，使用默认数据')
  
  // 由于系统秒杀没有详情接口，使用默认数据
  productDetail.value = {
    seckillId: seckillId,
    planName: '系统秒杀商品',
    seckillPrice: 19.9,
    price: 39.9,
    discount: 0.5,
    stock: 100,
    limitBuy: 2,
    startTime: '2025-06-15 10:00:00',
    endTime: '2025-06-15 22:00:00',
    details: '限时秒杀，数量有限，先到先得！',
    imgUrl: '/static/default-product.jpg'
  }
  
  stockCount.value = productDetail.value.stock
  
  if (currentStatus.value === 'upcoming') {
    startCountdown()
  }
  
  loading.value = false
}

// 开始倒计时
function startCountdown() {
  updateCountdown()
  countdownTimer = setInterval(updateCountdown, 1000)
}

// 更新倒计时
function updateCountdown() {
  const countdown = getCountdown(productDetail.value.startTime)
  
  if (countdown.totalSeconds <= 0) {
    if (countdownTimer) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
    return
  }
  
  timeLeft.hours = countdown.hours
  timeLeft.minutes = countdown.minutes
  timeLeft.seconds = countdown.seconds
}

// 处理购买
function handlePurchase() {
  uni.showLoading({ title: '抢购中...', mask: true })
  
      const userId = uni.getStorageSync('userId')
    if (!userId) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
  
  // 判断是门店秒杀还是系统秒杀
  if (productDetail.value.releaseId) {
    // 门店秒杀
    const cachedStoreId = uni.getStorageSync('storeId') || 3
    const cachedTableNo = uni.getStorageSync('tableNo') || 2
    
    const params = {
      releaseId: parseInt(productDetail.value.releaseId),
      userId: String(userId),
      quantity: 1,
      limit: parseInt(productDetail.value.purchaseLimit) || 1,
      dishId: parseInt(productDetail.value.dishId),
      seckillPrice: parseFloat(productDetail.value.seckillPrice),
      dishName: productDetail.value.dishName || '秒杀商品',
      storeId: parseInt(cachedStoreId),
      tableNumber: parseInt(cachedTableNo)
    }
    
    // 验证必需参数
    if (!params.releaseId || !params.dishId || params.seckillPrice === undefined || params.seckillPrice === null) {
      uni.hideLoading()
      uni.showToast({ title: '参数不完整，请刷新重试', icon: 'none' })
      console.error('参数验证失败:', params)
      return
    }
    
    // 处理数字类型转换，确保不是NaN
    if (isNaN(params.releaseId) || isNaN(params.dishId) || isNaN(params.seckillPrice)) {
      uni.hideLoading()
      uni.showToast({ title: '参数格式错误，请刷新重试', icon: 'none' })
      console.error('参数格式错误:', params)
      return
    }
    
    console.log('门店秒杀购买参数:', params)
    buySeckill(params).then(res => {
      console.log('门店秒杀购买响应:', res)
      handlePurchaseResult(res)
    }).catch(error => {
      console.error('门店秒杀购买失败:', error)
      uni.showToast({ title: '网络错误', icon: 'none' })
    }).finally(() => {
      uni.hideLoading()
    })
  } else {
    // 系统秒杀
    const params = {
      seckillId: productDetail.value.seckillId,
      customerId: userId
    }
    
    startSystemSeckill(params).then(res => {
      console.log('系统秒杀购买响应:', res)
      handlePurchaseResult(res)
    }).catch(error => {
      console.error('系统秒杀购买失败:', error)
      uni.showToast({ title: '网络错误', icon: 'none' })
    }).finally(() => {
      uni.hideLoading()
    })
  }
}

// 处理购买结果
function handlePurchaseResult(res) {
  console.log('处理购买结果:', res)
  
  // 检查响应结构，兼容不同的返回格式
  const isSuccess = res && (res.code === 200 || (res.success === true && res.code === 200))
  const responseData = res.data || res.orderInfo || {}
  const message = res.message || '操作完成'
  
  if (isSuccess) {
    uni.showModal({
      title: '抢购成功',
      content: '恭喜您抢购成功！订单正在处理中，请稍后查看订单状态。',
      showCancel: false,
      success: () => {
        // 可以跳转到订单页面
        if (responseData && responseData.orderNumber) {
          console.log('订单号:', responseData.orderNumber)
        }
      }
    })
    
    // 更新库存显示
    const purchasedQuantity = 1 // 本次购买数量
    stockCount.value = Math.max(0, stockCount.value - purchasedQuantity)
    
    // 同步更新productDetail中的库存字段
    if (productDetail.value.seckillQuantity !== undefined) {
      productDetail.value.seckillQuantity = Math.max(0, productDetail.value.seckillQuantity - purchasedQuantity)
    }
    if (productDetail.value.stock !== undefined) {
      productDetail.value.stock = Math.max(0, productDetail.value.stock - purchasedQuantity)
    }
    
    console.log('库存已更新:', {
      stockCount: stockCount.value,
      seckillQuantity: productDetail.value.seckillQuantity,
      stock: productDetail.value.stock
    })
    
    // 通知列表页面刷新数据
    uni.$emit('seckillPurchaseSuccess', {
      releaseId: productDetail.value.releaseId,
      purchasedQuantity: purchasedQuantity
    })
    
    // 延迟刷新实时库存，确保数据准确
    setTimeout(() => {
      refreshRealTimeStock()
    }, 1000)
    
  } else {
    // 根据不同的错误码显示不同的提示
    let errorMsg = message || '抢购失败'
    let icon = 'none'
    
    if (res && res.code === 500) {
      if (message.includes('库存不足')) {
        errorMsg = '商品已售完，请选择其他商品'
        icon = 'none'
      } else if (message.includes('超出限购数量')) {
        errorMsg = '您已达到限购数量，无法继续购买'
        icon = 'none'
      } else if (message.includes('活动未开始')) {
        errorMsg = '活动尚未开始，请耐心等待'
        icon = 'none'
      } else if (message.includes('已结束')) {
        errorMsg = '活动已结束，感谢您的参与'
        icon = 'none'
      }
    }
    
    uni.showToast({ 
      title: errorMsg, 
      icon: icon,
      duration: 2000
    })
  }
}

// 刷新实时库存
function refreshRealTimeStock() {
  if (!productDetail.value.releaseId) return
  
  console.log('刷新实时库存，releaseId:', productDetail.value.releaseId)
  
  getSeckillRealTimeStock(productDetail.value.releaseId).then(res => {
    console.log('实时库存响应:', res)
    if (res && res.stockCount !== undefined) {
      const realTimeStock = parseInt(res.stockCount)
      console.log('更新实时库存:', realTimeStock)
      
      // 保存原始库存数量（如果还没有的话）
      if (!productDetail.value.originalSeckillQuantity) {
        productDetail.value.originalSeckillQuantity = productDetail.value.seckillQuantity || realTimeStock
      }
      
      // 更新当前库存，但保持原始库存不变
      stockCount.value = realTimeStock
      productDetail.value.seckillQuantity = realTimeStock
      productDetail.value.stock = realTimeStock
      
      console.log('库存更新完成:', {
        originalSeckillQuantity: productDetail.value.originalSeckillQuantity,
        currentStock: realTimeStock,
        stockCount: stockCount.value,
        soldCount: (productDetail.value.originalSeckillQuantity || 0) - realTimeStock
      })
    }
  }).catch(error => {
    console.error('获取实时库存失败:', error)
  })
}

// 返回上一页
function goBack() {
  uni.navigateBack()
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部图片区 */
.header-section {
  position: relative;
  height: 500rpx;
}

.image-swiper {
  width: 100%;
  height: 100%;
}

.product-image {
  width: 100%;
  height: 100%;
}

.status-overlay {
  position: absolute;
  top: 40rpx;
  right: 30rpx;
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.status-upcoming {
  background: rgba(255, 149, 0, 0.9);
}

.status-active {
  background: rgba(255, 71, 87, 0.9);
  animation: pulse 2s infinite;
}

.status-ended {
  background: rgba(153, 153, 153, 0.9);
}

.status-loading {
  background: rgba(102, 126, 234, 0.9);
}

.status-text {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bold;
}

.back-btn {
  position: absolute;
  top: 40rpx;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

/* 滚动内容 */
.content-scroll {
  flex: 1;
  max-height: calc(100vh - 500rpx - 140rpx);
}

/* 商品信息 */
.product-info {
  background: #ffffff;
  margin: -40rpx 30rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.product-title {
  flex: 1;
  font-size: 36rpx;
  font-weight: bold;
  color: #1a1a1a;
}

.discount-tag {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: #ffffff;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: bold;
}

/* 价格区域 */
.price-section {
  margin-bottom: 40rpx;
}

.current-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.price-symbol {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: bold;
}

.price-number {
  font-size: 64rpx;
  color: #ff4757;
  font-weight: bold;
}

.price-unit {
  font-size: 24rpx;
  color: #ff4757;
  margin-left: 8rpx;
}

.original-price {
  display: flex;
  align-items: center;
}

.original-text {
  font-size: 26rpx;
  color: #999999;
  text-decoration: line-through;
  margin-right: 20rpx;
}

.save-text {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

/* 进度卡片 */
.progress-card {
  background: #f8f9ff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.progress-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
}

.progress-percent {
  font-size: 32rpx;
  color: #ff4757;
  font-weight: bold;
}

.progress-bar {
  height: 16rpx;
  background: #e8eaff;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.progress-info {
  display: flex;
  justify-content: space-between;
}

.sold-info, .stock-info {
  font-size: 24rpx;
  color: #666666;
}

/* 限购信息 */
.limit-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.limit-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.limit-text {
  font-size: 26rpx;
  color: #666666;
  margin-left: 12rpx;
}

/* 时间卡片 */
.time-card {
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 24rpx;
}

.time-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.time-row:last-child {
  margin-bottom: 0;
}

.time-label {
  font-size: 26rpx;
  color: #666666;
  min-width: 140rpx;
}

.time-value {
  font-size: 26rpx;
  color: #333333;
}

/* 详情区域 */
.detail-section, .purchase-records {
  background: #ffffff;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx;
}

.section-title {
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1a1a1a;
}

.detail-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
}

/* 购买记录 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.record-item {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.record-info {
  flex: 1;
}

.user-name {
  font-size: 26rpx;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

.purchase-time {
  font-size: 22rpx;
  color: #999999;
}

.purchase-count {
  font-size: 24rpx;
  color: #ff4757;
  font-weight: 600;
}

.bottom-space {
  height: 40rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* 倒计时容器 */
.countdown-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-label {
  font-size: 28rpx;
  color: #333333;
  margin-right: 20rpx;
}

.countdown-time {
  display: flex;
  align-items: center;
}

.time-block {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
  text-align: center;
  min-width: 80rpx;
}

.time-num {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}

.time-unit {
  font-size: 20rpx;
}

.time-separator {
  color: #666666;
  font-size: 28rpx;
  font-weight: bold;
  margin: 0 12rpx;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.stock-info-btn {
  background: #f5f5f5;
  padding: 20rpx 24rpx;
  border-radius: 12rpx;
}

.stock-text {
  font-size: 24rpx;
  color: #666666;
}

.buy-button {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  border: none;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(255, 71, 87, 0.4);
}

.disabled-button {
  flex: 1;
  height: 80rpx;
  background: #cccccc;
  border: none;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buy-text, .disabled-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}
</style>
